<script setup lang="ts">
import type { RegisterVO } from '#/api/register/personal/model';

import { ref } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';

import { Popconfirm } from 'ant-design-vue';

import { groupRemoveMember } from '#/api/register/group';
import GroupMemberTable from '#/views/register/personal/index.vue';

// const props = defineProps<{ groupId?: number | string }>();
const emit = defineEmits<{ reload: [] }>();

const currGroupId = ref<number | string>();
const groupName = ref<string>('');
const table = ref();
const extraColumn = [
  {
    title: '主联系人',
    field: 'isMaster',
    width: 100,
    slots: { default: 'isMaster' },
  },
];
const [BasicDrawer, drawerApi] = useVbenDrawer({
  class: 'w-[80%]',
  onClosed: handleClosed,
  footer: false,
  onOpenChange: async (isOpen) => {
    if (!isOpen) {
      return null;
    }

    const { groupId, name } = drawerApi.getData() as {
      groupId?: number | string;
      name?: string;
    };

    if (name) {
      groupName.value = name;
    }
    if (groupId) {
      currGroupId.value = groupId;
    }
  },
});

async function handleClosed() {
  //
}

async function handleRemove(row: RegisterVO) {
  // console.log(row);
  await groupRemoveMember(row.id);
  await table.value?.reload();
}
</script>

<template>
  <BasicDrawer :title="`参观团 - ${groupName}`">
    <GroupMemberTable
      ref="table"
      title="参观团人员"
      readonly
      :group-id="currGroupId"
      :extra-columns="extraColumn"
      @reload="emit('reload')"
    >
      <template #action="{ row }">
        <Popconfirm
          :get-popup-container="getVxePopupContainer"
          placement="left"
          title="仅从参观团中去除，确认移除？"
          @confirm="handleRemove(row)"
        >
          <ghost-button
            v-access:code="['register:group:removeMember']"
            danger
            @click.stop=""
          >
            移除
          </ghost-button>
        </Popconfirm>
      </template>
    </GroupMemberTable>
  </BasicDrawer>
</template>
